<template>
   <div class="collect-body">
        <!-- 顶部导航 -->
        <Header>
           <!-- 具名插槽 -->
           <div slot="title-slot">我的收藏</div>
           <div slot="home-slot"><!--利用空内容，置空覆盖插槽默认值--></div>
        </Header>
        <!-- 切换区 -->
        <div class="select">
            <!-- 绑定状态值用于两个选项卡的状态切换 -->
            <div @click="groupFn" v-bind:class="[status?'active':'']">团购（0）</div>
            <div @click="storeFn" v-bind:class="[status?'':'active']">商家（2）</div>
        </div>
        <!-- 内容展示区 -->
        <div class="main-area">
            <!-- 团购 -->
            <div v-if="status" class="group-area">
                <img src="https://p0.meituan.net/travelcube/7abc4de567fc8e325c86033257c8113a20460.png" alt="">
                <p>您还没有任何收藏，赶紧去逛逛吧</p>
            </div>
            <!-- 商家 -->
            <div v-else class="store-area">
                <ul>
                    <li v-for="item in storeList" :key="item.id">
                        <!-- 左侧商家图片 -->
                        <div class="store-left">
                            <img v-bind:src="item.storeImg" alt="">
                        </div>
                        <!-- 右侧商家信息 -->
                        <div class="store-right">
                            <!-- 上---商品名 -->
                            <div class="store-title">{{item.title}}</div>
                            <!-- 中---级别 -->
                            <div class="store-level">
                                <img v-bind:src="item.star1" alt="">
                                <img v-bind:src="item.star2" alt="">
                                <img v-bind:src="item.star3" alt="">
                                <img v-bind:src="item.star4" alt="">
                                <img v-bind:src="item.star5" alt="">
                            </div>
                            <!-- 下---位置+距离 -->
                            <div class="store-bottom">
                                <div class="local">{{item.local}}</div>
                                <div class="length">{{item.length}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部导航 -->
        <Footer></Footer>
   </div>
</template>
   
<script>
    // 1、引入组件
    import Header from '@/components/PublicHeader'
    import Footer from '@/components/PublicFooter'
    export default {
        data () {
           return {
               status:true,
               storeList:[
                   {
                       id:0,
                       title:'先味河鲜自助火锅',
                       storeImg:'http://p0.meituan.net/100.0/deal/201208/23/2_0823133450.jpg',
                       star1:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       star2:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       star3:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       star4:'https://p0.meituan.net/travelcube/06a4e7713a82716580bde8b53131b4f9793.png',
                       star5:'https://p0.meituan.net/travelcube/2b10765f9087e87a8b48795d27c529331832.png',
                       local:'双流机场',
                       length:'621.4km'
                   },
                   {
                       id:1,
                       title:'降龙十八盆海鲜·牛排·烤肉自助',
                       storeImg:'https://img.meituan.net/100.0/msmerchant/dff349941cf3ef61b5a14382587650c92198189.png',
                       star1:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       star2:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       star3:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       star4:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       star5:'https://p1.meituan.net/travelcube/b69d63faec9671a1a2d72c2b0ecc5649622.png',
                       local:'解放大道',
                       length:'483km'
                   }
               ]
           }
       },
       methods: {
        //  激活团购
         groupFn(){
             this.status = true
         },
        //  激活商家
         storeFn(){
             this.status = false
         }
       },
        // 2、组件注册定义
        components: {
            Header,Footer
        }
    }
</script>
   
<style scoped lang="less">
    .collect-body{
        .footer{
            margin-top: 0;
        }
        .select{
            margin: .373333rem .266667rem;
            height: .8rem;
            display: flex;/**弹性布局 */
            border: 1px solid #666;
            div{
                width: 50%;
                height: 100%;
                line-height: .8rem;
                text-align: center;
            }
            .active{
                background: #666;
                color: white;
            }
        }
        .main-area{
            width: 100%;
            min-height: 8rem;/**最小高度 */
            background-color: white;
            .group-area{
                display: flex;/**弹性布局 */
                justify-content: center;
                flex-wrap: wrap;
                img{
                    width:4.266667rem;
                    padding-top: 2.4rem;
                }
                p{
                    width: 100%;
                    text-align: center;
                    margin-top: .666667rem;
                    padding-bottom: 2.4rem;
                }
            }
            .store-area{
                ul{
                    li{
                        display: flex;/**弹性布局 */
                        padding: .373333rem .266667rem;
                        border-bottom: 1px solid #DDD8CE;
                        .store-left{
                            img{
                                width: 2.4rem;
                                height: 2.4rem;
                            }
                        }
                        .store-right{
                            flex: 1;/**占据剩余空间 */
                            margin-left: .266667rem;
                            .store-title{
                                margin: .16rem 0;
                                font-size: .4rem;
                                color: #333;
                            }
                            .store-level{
                                margin-top: .266667rem;
                                img{
                                    width: .373333rem;
                                    height: .373333rem;
                                }
                            }
                            .store-bottom{
                                display: flex;/**弹性布局 */
                                color: #666;
                                margin-top: .6rem;
                                .local{
                                    flex: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>


